<template>
  <view class="mall-wrap u-skeleton" :data-theme="globPrimary">
    <u-navbar>
      <view class="search-wrap">
        <u-search
          v-model="keyword"
          height="72"
          placeholder="搜索商品"
          @search="onSearch"
          @custom="onSearch"
        ></u-search>
      </view>
    </u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="refresh"
      @up="getList"
    >
      <view class="product-list">
        <u-row gutter="18">
          <u-col span="6" v-for="(item, index) in productlist" :key="index">
            <view class="product-item" @tap="onView(item)">
              <edu-image width="100%" :height="336" :src="item.cover_url"></edu-image>
              <view class="desc">
                <view class="title u-line-1 u-skeleton-rect">{{ item.title }}</view>
                <view class="curprice u-skeleton-rect">
                  <text class="num">{{ item.credit_price }}</text>
                  <text class="txt">积分+{{ projectSetting.appMoneySymbol }}</text>
                  <text class="num">{{ item.cash_price }}</text>
                </view>
                <view class="tool">
                  <text class="total u-skeleton-rect">{{ item.sale_count }}人兑换</text>
                  <text class="oriprice u-skeleton-rect"
                    >{{ projectSetting.appMoneySymbol }}{{ item.scribing_price }}</text
                  >
                </view>
                <button
                  class="btn u-line-1 u-fix-ios-appearance u-skeleton-rect"
                  @tap.stop="onExchange(item)"
                >
                  立即兑换
                </button>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
    </mescroll-body>

    <u-skeleton :loading="loading" el-color="#f3f4f6" bg-color="transparent"></u-skeleton>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import productListNavbar from './components/list-navbar.vue'
import projectSetting from '@/settings/projectSetting.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    productListNavbar,
  },
  data() {
    return {
      projectSetting,
      keyword: '',
      loading: true,
      productlist: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
  },
  onLoad(options) {
    this.doCustomTimes(4, () => {
      this.productlist.push({
        title: '默认标题',
        cover_url: '',
        scribing_price: '100.00',
        cash_price: '100.00',
        credit_price: '100',
        stock_num: '100',
      })
    })
    // 搜索课程的关键字
    if (!this.$u.test.empty(options.title)) {
      this.keyword = options.title
    }
  },
  options: { styleIsolation: 'shared' },
  methods: {
    getList(page) {
      this.$edu.api
        .getMallProductList({
          title: this.keyword,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data

          if (page.num == 1) this.productlist = []
          this.productlist = this.productlist.concat(list)
          this.mescroll.endSuccess(list.length)
          setTimeout(() => {
            this.loading = false
          }, 50)
        })
    },
    // 下拉刷新
    refresh() {
      this.mescroll.resetUpScroll()
    },
    // 立即兑换
    onExchange(item) {
      this.$edu.judgeLogin(() => {
        this.$u.route('pageFound/mall/pay', {
          id: item.id,
        })
      })
    },
    // 查看详情
    onView(item) {
      this.$u.route('pageFound/mall/details', {
        id: item.id,
      })
    },
    // 搜索
    onSearch() {
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
    // 回调函数需要执行的次数
    doCustomTimes(times, callback) {
      let i = -1
      while (++i < times) {
        callback(i)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.search-wrap {
  flex: 1;
  padding-right: 30rpx;
}

.product-list {
  padding: 0 20rpx;
  margin-top: 32rpx;
  .product-item {
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 18rpx;
    overflow: hidden;
    .desc {
      padding: 16rpx 16rpx 24rpx;
    }
    .title {
      font-size: 28rpx;
      font-weight: 600;
      color: $edu-main-color;
      line-height: 38rpx;
    }
    .curprice {
      margin-top: 8rpx;
      color: $edu-price-color;
      .num {
        font-size: 32rpx;
      }
      .txt {
        font-size: 22rpx;
      }
    }
    .tool {
      margin-top: 8rpx;
      display: flex;
    }
    .total {
      font-size: 22rpx;
      font-weight: 400;
      color: $edu-price-color;
    }
    .oriprice {
      font-size: 22rpx;
      font-weight: 400;
      color: $edu-tips-color;
      text-decoration: line-through;
      margin-left: auto;
    }
    .btn {
      margin-top: 16rpx;
      display: block;
      height: 56rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 56rpx;
      background: linear-gradient(90deg, #ff3b2f 0%, #ff8a52 100%);
      border-radius: 8rpx;
    }
  }
}
</style>
